<template>
  <div class="holdRatedetail">
    <el-row>
      <el-col :span="24">
        <dynForm
          :info-form="infoForm"
          :search-tags="searchTags"
          :select-list="selectList"
        >
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="doSearch"
          >
            {{ $t('search') }}</el-button>
        </dynForm>
      </el-col>
    </el-row>
    <el-card>
      <el-row>
        <dynTable
          ref="dynTable"
          :loading="tableLoading"
          :table-data="tableData"
          :table-columns="tableColumns"
        />
      </el-row>
      <pagination
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        :total="total"
        @pagination="onChangePage"
      />
    </el-card>
  </div>
</template>
<script>
import { getDetailList } from '@/api/auto-analyze-warning/holdRate'
import mySetting from '@/mixins/mySetting'
export default {
  name: 'HoldRateDetail',
  mixins: [mySetting],
  data() {
    const searchTags = [
      { label: 'LotNo', prop: 'lotNo', tag: 'DynInput' },
      //   { label: this.$t('typeOfViolation'), prop: 'alarmTypeStr', tag: 'DynInput' },
      { label: this.$t('dateOfViolation'), prop: '', tag: 'Dyndaterange', event: (value) => {
        this.infoForm.startDate = Array.isArray(value) ? value[0] : null
        this.infoForm.endDate = Array.isArray(value) ? value[1] : null
      } }
    ]
    const tableColumns = [
      { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
        return (
          <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
        )
      } },
      { prop: 'lotNo', label: 'LotNo' },
      { prop: 'bin', label: 'BinNo' },
      { prop: 'binType', label: 'BinType' },
      { prop: 'alarmTypeStr', label: this.$t('typeOfViolation') },
      { prop: 'spec', label: 'SPEC' },
      { prop: 'value', label: this.$t('actualValue') },
      { prop: 'alarmTime', label: this.$t('dateOfViolation') }
    ]
    return {
      infoForm: {},
      selectList: {},
      searchTags: Object.freeze(searchTags),
      tableColumns: Object.freeze(tableColumns),
      tableData: [],
      tableLoading: true
    }
  },
  computed: {
    holdRouteParams() {
      return this.$store.getters.holdRouteParams
    }
  },
  created() {
    this.initList()
  },
  methods: {
    async initList() {
      const res = await getDetailList(this.$clearNull({ ...this.listQuery, ...this.holdRouteParams, ...this.infoForm }))
      this.tableData = res.data
      this.total = res.total
      this.tableLoading = false
    },
    doSearch() {
      this.listQuery.page = 1
      this.initList()
    },
    onChangePage(page) {
      this.listQuery = page
      this.initList()
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/defaultStyle.scss";
::v-deep .el-row:nth-child(1) {
  padding-bottom: 0;
}
::v-deep .el-form {
  padding-top: 10px;
}
.upload-btn{
  margin: 0 10px;
}
</style>
